<script lang="ts" setup>
console.log(
  "                   _oo0oo_                     \n" +
    "                  o8888888o										\n" +
    '                  88" . "88										\n' +
    "                  (| -_- |)										\n" +
    "                   O\\ = /O										\n" +
    "               ____/`---'\\____									\n" +
    "             .   ' \\\\| |// `.									\n" +
    "              / \\\\||| : |||// \\								\n" +
    "           / _||||| -卍- |||||- \\								\n" +
    "              | | \\\\\\ - /// | |								\n" +
    "            | \\_| ''\\---/'' | |								\n" +
    "             \\ .-\\__ `-` ___/-. /							\n" +
    "          ___`. .' /--.--\\ `. . __							\n" +
    '       ."" "< `.___\\_<|>_/___. ` >" "".        \n' +
    "      | | : `- \\`.;`\\ _ /`;.`/ - ` : | |       \n" +
    "        \\ \\ `-. \\_ __\\ /__ _/ .-` / /          \n" +
    "======`-.____`-.___\\_____/___.-`____.-'======  \n" +
    "                   `=---='                     \n" +
    ".............................................  \n\t\t" +
    "佛祖镇楼                  BUG辟易                          \n\t" +
    "佛曰:\n\t\t" +
    "写字楼里写字间，写字间里程序员；\n\t\t" +
    "程序人员写程序，又拿程序换酒钱。\n\t\t" +
    "酒醒只在网上坐，酒醉还来网下眠；\n\t\t" +
    "酒醉酒醒日复日，网上网下年复年。\n\t\t" +
    "但愿老死电脑间，不愿鞠躬老板前；\n\t\t" +
    "奔驰宝马贵者趣，公交自行程序员。\n\t\t" +
    "别人笑我忒疯癫，我笑自己命太贱；\n\t\t" +
    "不见满街漂亮妹，哪个归得程序员？"
);
import { ref, onMounted, reactive } from "vue";
import { useCounterStore } from "../pain/login/login";
import { GetVip } from "../Api/login/login";
import { storeToRefs } from "pinia";
import { useRoute, useRouter } from "vue-router";
import Dialog from "../components/login/index.vue";
import "../assets/com/com.scss";
import router from "../router";
import { decrypt } from "@/utils/index";
const token = localStorage.getItem("token");
const to = ref("");
if (token) {
  to.value = JSON.parse(decrypt(token));
}

const handleSelect = (key: string, keyPath: string[]) => {
  // console.log(key, keyPath);
};
const route = useRoute();
// const router = useRouter();

// 激活状态
const store = useCounterStore();
// 弹框
const login = () => {
  isShowDrawer.value = true;
};

// const isShowDrawer = ref(false);

// 关闭弹窗
function closeDrawer() {
  isShowDrawer.value = false;
}

// Vip
const ToVip = () => {
  router.push("/memberPayment");
};

// 首页
const Tohome = () => {
  router.push("/");
};

// 跳转积分
const integral = () => {
  router.push("/service/mypoints");
};

// 跳转会员
const bzhy = () => {
  // router.push("/memberPayment");
  const href = router.resolve({
    path: "/memberPayment",
  });
  window.open(href.href, "_blank");
};

// 跳转工作台
const work = () => {
  if (token) {
    router.push("/head");
  } else {
    isShowDrawer.value = true;
  }
  router.push("/header");
};

const staging1 = () => {
  router.push("/search");
};

// pinia
const { vipw } = storeToRefs(store);
const { vip } = storeToRefs(store);
const { userLogin } = storeToRefs(store);
const { userName } = storeToRefs(store);
const { vips } = storeToRefs(store); //普通会员
const { switchVip } = storeToRefs(store); //标准会员
const { vipMembers } = storeToRefs(store); //高级会员
const { platinum } = storeToRefs(store); //vip会员
const { diamond } = storeToRefs(store); //定制会员
const { isShowDrawer } = storeToRefs(store); //弹框
const hui0 = reactive([]);
const hui1 = reactive([]);
const hui2 = reactive([]);
const hui3 = reactive([]);
const hui4 = reactive([]);
onMounted(() => {
  Refresh();
  // 接口
  GetVip().then((res) => {
    hui0.value = res.data.data[0].name;
    hui1.value = res.data.data[1].name;
    hui2.value = res.data.data[2].name;
    hui3.value = res.data.data[3].name;
    hui4.value = res.data.data[4].name;
  });
});
//刷新状态
function Refresh() {
  if (token) {
    vipw.value = false; //未登录图片
    vip.value = true;
    userLogin.value = false; //登录按钮
    //普通会员
    if (to.value.level_id == 1) {
      switchVip.value = false;
      vips.value = true;
    }
    //标准会员
    else if (to.value.level_id == 2) {
      switchVip.value = true;
      vips.value = false;
    }
    //高级会员
    else if (to.value.level_id == 3) {
      vipMembers.value = true;
      switchVip.value = false;
      vips.value = false;
    }
    //vip会员
    else if (to.value.level_id == 4) {
      vipMembers.value = false;
      switchVip.value = false;
      platinum.value = true;
      vips.value = false;
    }
    //定制会员
    else if (to.value.level_id == 5) {
      vipMembers.value = false;
      switchVip.value = false;
      platinum.value = false;
      vips.value = false;
      diamond.value = true;
    }
  }
}

//个人中心
const userPasswordd = () => {
  router.push("/stagingInfo");
};

// 退出
const toUser = () => {
  localStorage.removeItem("token");
  // router.push("/");
  if (token) {
    vipw.value = true;
    vip.value = false;
    userLogin.value = true;
    switchVip.value = false;
    vips.value = false;
    vipMembers.value = false;
    switchVip.value = false;
    platinum.value = false;
    vips.value = false;
    diamond.value = false;
  }
};
</script>

<template>
  <div>
    <el-container>
      <div class="topAddress">
        <div style="display: flex; align-items: center; margin-top: 10px">
          <p class="df" style="font-size: 14px">
            <span style="font-weight: bold; color: #333333"> 城市： </span>
            <span class="ml20">
              <a
                href="http://anhui.6ocbx.com"
                target="_blank"
                rel="noopener noreferrer"
                class="c3"
                >安徽</a
              >
            </span>
            <span class="ml20">
              <a href="http://beijing.6ocbx.com" class="c3">北京</a>
              <!-- <a href="" target="_blank" rel="noopener noreferrer" class="c3"
                >北京</a
              > -->
            </span>
            <span class="ml20">
              <a
                href="http://shanghai.6ocbx.com"
                target="_blank"
                rel="noopener noreferrer"
                class="c3"
                >上海</a
              >
            </span>
            <span class="ml20">
              <a
                href="http://guangdong.6ocbx.com"
                target="_blank"
                rel="noopener noreferrer"
                class="c3"
                >广东</a
              >
            </span>
            <span class="ml20">
              <a
                href="http://shenzhen.6ocbx.com"
                target="_blank"
                rel="noopener noreferrer"
                class="c3"
                >深圳</a
              >
            </span>
            <!-- <span><a href="">sx</a></span> -->
            <!-- <span class="ml20">
              <div class="container">
                更多 >>>
                <div class="box"></div>
              </div>
            </span> -->
            <span class="ml20">
              <a-popover title="">
                <template #content>
                  <div>
                    <span class="ul">华北</span>
                    <span class="li">
                      <a
                        href="http://beijing.6ocbx.com"
                        target="_blank"
                        rel="noopener noreferrer"
                        >北京</a
                      >
                    </span>
                    <span class="li">
                      <a
                        href="http://tianjin.6ocbx.com"
                        target="_blank"
                        rel="noopener noreferrer"
                        >天津</a
                      >
                    </span>
                    <span class="li">
                      <a
                        href="http://hebei.6ocbx.com"
                        target="_blank"
                        rel="noopener noreferrer"
                        >河北</a
                      >
                    </span>
                    <span class="li">
                      <a
                        href="http://shanxi.6ocbx.com"
                        target="_blank"
                        rel="noopener noreferrer"
                        >山西</a
                      >
                    </span>
                    <span class="li">
                      <a
                        href="http://neimenggu.6ocbx.com"
                        target="_blank"
                        rel="noopener noreferrer"
                        >内蒙古</a
                      >
                    </span>
                  </div>
                  <div>
                    <span class="ul">华东</span>
                    <span class="li">
                      <a
                        href="http://anhui.6ocbx.com"
                        target="_blank"
                        rel="noopener noreferrer"
                        >安徽</a
                      >
                    </span>
                    <span class="li">
                      <a
                        href="http://shanghai.6ocbx.com"
                        target="_blank"
                        rel="noopener noreferrer"
                        >上海</a
                      >
                    </span>
                    <span class="li">
                      <a
                        href="http://jiangsu.6ocbx.com"
                        target="_blank"
                        rel="noopener noreferrer"
                        >江苏</a
                      >
                    </span>
                    <span class="li">
                      <a
                        href="http://shandong.6ocbx.com"
                        target="_blank"
                        rel="noopener noreferrer"
                        >山东</a
                      >
                    </span>
                    <span class="li">
                      <a
                        href="http://zhejiang.6ocbx.com"
                        target="_blank"
                        rel="noopener noreferrer"
                        >浙江</a
                      >
                    </span>
                    <span class="li">
                      <a
                        href="http://fujian.6ocbx.com"
                        target="_blank"
                        rel="noopener noreferrer"
                        >福建</a
                      >
                    </span>
                    <span class="li">
                      <a
                        href="http://江西.6ocbx.com"
                        target="_blank"
                        rel="noopener noreferrer"
                        >江西</a
                      >
                    </span>
                    <span class="li">
                      <a
                        href="http://taiwan.6ocbx.com"
                        target="_blank"
                        rel="noopener noreferrer"
                        >台湾</a
                      >
                    </span>
                  </div>
                  <div>
                    <span class="ul">华中</span>
                    <span class="li">
                      <a
                        href="http://hubei.6ocbx.com"
                        target="_blank"
                        rel="noopener noreferrer"
                        >湖北</a
                      >
                    </span>
                    <span class="li">
                      <a
                        href="http://henan.6ocbx.com"
                        target="_blank"
                        rel="noopener noreferrer"
                        >河南</a
                      >
                    </span>
                    <span class="li">
                      <a
                        href="http://hunan.6ocbx.com"
                        target="_blank"
                        rel="noopener noreferrer"
                        >湖南</a
                      >
                    </span>
                  </div>
                  <div>
                    <span class="ul">华南</span>
                    <span class="li">
                      <a
                        href="http://guangdong.6ocbx.com"
                        target="_blank"
                        rel="noopener noreferrer"
                        >广东</a
                      >
                    </span>
                    <span class="li">
                      <a
                        href="http://山西.6ocbx.com"
                        target="_blank"
                        rel="noopener noreferrer"
                        >广西</a
                      >
                    </span>
                    <span class="li">
                      <a
                        href="http://hainan.6ocbx.com"
                        target="_blank"
                        rel="noopener noreferrer"
                        >海南</a
                      >
                    </span>
                    <span class="li">
                      <a
                        href="http://xianggang.6ocbx.com"
                        target="_blank"
                        rel="noopener noreferrer"
                        >香港</a
                      >
                    </span>
                    <span class="li">
                      <a
                        href="http://aomen.6ocbx.com"
                        target="_blank"
                        rel="noopener noreferrer"
                        >澳门</a
                      >
                    </span>
                  </div>
                  <div>
                    <span class="ul">东北</span>
                    <span class="li">
                      <a
                        href="http://liaoning.6ocbx.com"
                        target="_blank"
                        rel="noopener noreferrer"
                        >辽宁</a
                      >
                    </span>
                    <span class="li">
                      <a
                        href="http://jilin.6ocbx.com"
                        target="_blank"
                        rel="noopener noreferrer"
                        >吉林</a
                      >
                    </span>
                    <span class="li">
                      <a
                        href="http://heilongjiang.6ocbx.com"
                        target="_blank"
                        rel="noopener noreferrer"
                        >黑龙江</a
                      >
                    </span>
                  </div>
                  <div>
                    <span class="ul">西北</span>
                    <span class="li">
                      <a
                        href="http://shanxi.6ocbx.com"
                        target="_blank"
                        rel="noopener noreferrer"
                        >陕西</a
                      >
                    </span>
                    <span class="li">
                      <a
                        href="http://gansu.6ocbx.com"
                        target="_blank"
                        rel="noopener noreferrer"
                        >甘肃</a
                      >
                    </span>
                    <span class="li">
                      <a
                        href="http://ningxia.6ocbx.com"
                        target="_blank"
                        rel="noopener noreferrer"
                        >宁夏</a
                      >
                    </span>
                    <span class="li">
                      <a
                        href="http://qinghai.6ocbx.com"
                        target="_blank"
                        rel="noopener noreferrer"
                        >青海</a
                      >
                    </span>
                    <span class="li">
                      <a
                        href="http://xinjiang.6ocbx.com"
                        target="_blank"
                        rel="noopener noreferrer"
                        >新疆</a
                      >
                    </span>
                  </div>
                  <div>
                    <span class="ul">西南</span>
                    <span class="li">
                      <a
                        href="http://chongqing.6ocbx.com"
                        target="_blank"
                        rel="noopener noreferrer"
                        >重庆</a
                      >
                    </span>
                    <span class="li">
                      <a
                        href="http://sichuan.6ocbx.com"
                        target="_blank"
                        rel="noopener noreferrer"
                        >四川</a
                      >
                    </span>
                    <span class="li">
                      <a
                        href="http://guizhou.6ocbx.com"
                        target="_blank"
                        rel="noopener noreferrer"
                        >贵州</a
                      >
                    </span>
                    <span class="li">
                      <a
                        href="http://yunan.6ocbx.com"
                        target="_blank"
                        rel="noopener noreferrer"
                        >云南</a
                      >
                    </span>
                    <span class="li">
                      <a
                        href="http://xizang.6ocbx.com"
                        target="_blank"
                        rel="noopener noreferrer"
                        >西藏</a
                      >
                    </span>
                  </div>
                </template>
                <div style="cursor: pointer; color: #f43107">更多>>></div>
              </a-popover>
            </span>
          </p>
        </div>

        <!-- 登录注册 -->
        <div class="df">
          <img
            @click="integral"
            src="../assets/img/组 5090@2x.png"
            style="
              width: 75px;
              height: 40px;
              margin-right: 20px;
              margin-top: 3px;
              cursor: pointer;
            "
            v-if="vip"
          />
          <img
            @click="ToVip"
            src="../assets/img/vipw.png"
            style="
              width: 72px;
              height: 24px;
              margin-right: 20px;
              cursor: pointer;
            "
            v-if="vipw"
          />
          <span style="cursor: pointer" @click="bzhy">
            <span v-if="vips">
              <img
                src="../assets/img/3.png"
                style="width: 26px; height: 26px"
              />
              <span style="margin-right: 10px; color: #6d6d15">
                {{ hui0.value }}</span
              >
            </span>
            <span style="margin-right: 10px; color: #78b5eb" v-if="switchVip">
              <img
                src="../assets/img/2.png"
                style="width: 23px; height: 23px"
              />
              <span>{{ hui1.value }}</span>
            </span>
            <!-- 高级会员  -->
            <span style="margin-right: 10px; color: #f5562f" v-if="vipMembers">
              <img
                src="../assets/img/4.png"
                style="width: 23px; height: 23px"
              />
              <span>{{ hui2.value }}</span>
            </span>
            <!-- vip会员 -->
            <span style="margin-right: 10px; color: #8babf6" v-if="platinum">
              <img
                src="../assets/img/5.png"
                style="width: 23px; height: 23px"
              />
              <span>{{ hui3.value }}</span>
            </span>
            <!-- 定制会员 -->
            <span style="margin-right: 10px; color: #6b5bd1" v-if="diamond">
              <img
                src="../assets/img/6.png"
                style="width: 23px; height: 23px"
              />
              <span>{{ hui4.value }}</span>
            </span>
          </span>
          <img
            src="../assets/img/user.png"
            style="width: 36px; height: 36px; margin-right: 10px"
            v-if="vip"
          />
          <p v-if="vip" style="margin-top: 18px">
            {{ userName }}
          </p>
          <el-dropdown :hide-on-click="true" trigger="click">
            <span class="el-dropdown-link">
              <img
                src="../assets/img/xia.png"
                style="
                  width: 12px;
                  height: 8px;
                  margin-left: 6px;
                  cursor: pointer;
                "
                v-if="vip"
              />
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="userPasswordd"
                  >个人中心</el-dropdown-item
                >
                <el-dropdown-item @click="toUser">退出</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>

          <el-button
            style="background: #f43107; border: 0; color: #fff"
            @click="login()"
            v-if="userLogin"
          >
            登录/注册
          </el-button>
        </div>
      </div>
      <!-- 线 -->
      <div style="height: 1px; border-bottom: 1px solid #dddd"></div>
      <!-- 线 -->
      <el-header>
        <span class="LOGO">
          <img
            src="../assets/newimg/Logo.png"
            @click="Tohome"
            style="width: 100%; height: 100%; cursor: pointer"
          />
        </span>
        <el-menu
          :default-active="route.path"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          :ellipsis="false"
          router
        >
          <el-menu-item index="/">
            <img src="../assets/img/home.png" class="iconimg" />
            <span class="ml4">首页</span>
          </el-menu-item>
          <el-menu-item @click="staging1()">
            <img src="../assets/img/路径 33@2x.png" class="iconimg" />
            <span class="ml4">搜索</span>
          </el-menu-item>
          <el-menu-item @click="work">
            <img src="../assets/img/路径 4087@2x.png" class="iconimg" />
            <span class="ml4">工作台</span>
          </el-menu-item>
          <el-sub-menu index="2">
            <template #title>
              <img src="../assets/img/组 5037@2x.png" class="iconimg" />
              <span class="ml4">市场洞察</span>
            </template>
            <el-menu-item index="/productanalysis">产品分析</el-menu-item>
            <el-menu-item index="/companyanalysis">企业分析 </el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="3">
            <template #title>
              <img src="../assets/img/组 5040@2x.png" class="iconimg" />
              <span class="ml4">行业解决方案</span>
            </template>
            <el-menu-item index="/medical">医疗行业</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="4">
            <template #title>
              <img src="../assets/img/组 5041@2x.png" class="iconimg" />
              <span class="ml4">数据服务</span>
            </template>

            <el-menu-item index="/dataservice">数据导出平台</el-menu-item>
            <el-menu-item index="/register">数据开放平台</el-menu-item>
          </el-sub-menu>

          <el-menu-item index="/doc">
            <img src="../assets/img/路径 4179@2x.png" class="iconimg" />
            <span class="ml4">标讯头条</span>
          </el-menu-item>

          <el-menu-item index="/staging">
            <img src="../assets/img/路径 4179@2x.png" class="iconimg" />
            <span class="ml4">老版工作台</span>
          </el-menu-item>
        </el-menu>
      </el-header>

      <!-- 登录弹框 -->
      <Dialog :isShowDrawer="isShowDrawer" @close-drawer="closeDrawer" />

      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<style>
.el-container.is-vertical {
  height: calc(100vh);
}
.el-dialog__body {
  padding: 0 !important;
}

/* tabs */
.deleteBorder .el-tabs__nav-wrap::after {
  height: 0 !important;
}

.deleteBorder .el-tabs__active-bar {
  background: transparent !important;
}

.el-menu--horizontal.el-menu {
  border-bottom: none !important;
}
</style>
<style lang="scss" scoped>
:deep(.el-menu--horizontal > .el-sub-menu.is-active .el-sub-menu__title) {
  color: #304156 !important;
  border-bottom: 2px solid #fff;
}
:deep(.el-menu-item:hover) {
  background-color: #fce2e0 !important;
  // border-top: 5px solid #F43107;
  border-top: 5px solid #f43107;
  color: #304156 !important;
}

:deep(.el-menu-item.is-active) {
  background-color: #fce2e0 !important;
  border-bottom: 0 !important;
  color: #fff;
  span {
    color: #304156 !important;
  }
}

:deep(.el-menu--horizontal > .el-sub-menu:hover .el-sub-menu__title) {
  color: #304156 !important;
}
:deep(.el-dialog__body) {
  height: 480px;
}
:deep(.el-dropdown-menu__item:hover) {
  background-color: #f43107 !important;
  color: #fff !important;
}

// 下拉
.user {
  text-align: center;
  margin-top: 10px;
  cursor: pointer;
  p:hover {
    line-height: 30px;
    background-color: #f43107 !important;
  }
}
.to {
  text-align: center;
  margin-top: 20px;
  cursor: pointer;
  p:hover {
    line-height: 30px;
    background-color: #00a7f2;
  }
}
.topAddress {
  width: 1200px;
  height: 60px;
  line-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;

  // margin-left: 380px;
}

.LOGO {
  width: 148px;
  height: 65px;
  text-align: center;
  margin-right: 50px;
}

.el-header {
  width: 1200px;
  height: 60px;
  color: #333;
  margin: 0 auto;
  display: flex;
  // margin-left: 360px;
  padding: 0;
}

.LoGoTop {
  width: 150px;
  height: 50px;
  background-color: #818181;
  border: 0;
  color: #fff;
  margin-top: 10px;
  margin-left: 20px;
}

.xx {
  width: 100%;
  height: 1px;
  border-bottom: 1px dotted #000;
}

// title内容
.title {
  font-size: 14px;
  font-weight: 400;
  color: #a9b1be;
  margin-bottom: 50px;
}

// 手机号
.phone {
  display: flex;
  align-items: center;

  .tel {
    width: 56px;
    height: 14px;
    font-size: 14px;
    font-weight: 400;
    color: #333333;
  }
}

// 输入框
.input_shuru {
  width: 420px;
  margin-top: 20px;
  border-top: 0;
  border-right: 0;
  border-left: 0;
  border-bottom: 1px solid #a9b1be;
  outline: none;
  font-size: 16px;
  padding-bottom: 10px;
}

input::-webkit-input-placeholder {
  color: #a9b1be;
}

// 验证码
.poDing {
  position: relative;
}

.el-main {
  background-color: #f6f6f6;
  color: #333;
  // text-align: center;
  padding: 0;
  box-sizing: border-box;
  // position: sticky;
  // position: -webkit-sticky;
  // top: 0;
  // left: 0;
}
.el-container.is-vertical {
  height: 100vh;
}

.el-footer {
  background-color: #b0adad;
  color: #333;
  text-align: center;
}

// 更多>>>
.ul {
  color: #fff;
  background-color: #f43107;
  width: 60px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  margin: 10px;
  font-weight: bold;
  display: inline-block;
}
.li {
  margin: 0 15px;
  a {
    color: #000;
  }
  a:hover {
    color: #f43107;
  }
}
</style>
